<!DOCTYPE html>
<html lang="en">

<head>
  <title> {{ page.title }} &bull; {{ site.title }} - {{ site.description }} </title>
  {% include meta.html %}
  <link href="{{ site.baseurl }}/{{ page.name | slugify}}/bulmaswatch.min.css" rel="stylesheet" />
  <style>
    .hero .container {
      width: 95%;
    }
  </style>
</head>

<body class="theme-page">
  <section class="hero is-primary">
    <!-- Hero header: will stick at the top -->
    <div class="hero-head">
      {% include nav.html %}
    </div>
    <!-- Hero content: will be in the middle -->
    <div class="hero-body">
      <div class="container">
        <h1 class="title">
          {{ page.name }}
        </h1>
        <h2 class="subtitle">
          {{ page.description }}
        </h2>
        <p>
          <a class="button is-primary is-inverted" href="{{ site.baseurl }}/{{page.name | slugify}}/bulmaswatch.min.css" target="_blank" onclick="ga('send', 'event', 'theme', 'download', '{{page.name}}');">Download</a>
          <a class="button is-dark" href="{{ site.repo_url }}/tree/gh-pages/{{page.name | slugify}}" target="_blank" onclick="ga('send', 'event', 'theme', 'github', '{{page.name}}');" title="Download from Github">
            <span class="icon"> <i class="fa fa-github"> </i> </span>
          </a>
        </p>
      </div>
    </div>
  </section>
  <div class="columns">
      <div class="column is-2">
        <aside class="menu section">
          <p class="menu-label"> Elements </p>
          <ul class="menu-list">
            <li>
              <a href="#typography"> Typography </a>
            </li>
            <li>
              <a href="#box"> Box </a>
            </li>
            <li>
              <a href="#button"> Button </a>
            </li>
            <li>
              <a href="#content"> Content </a>
            </li>
            <li>
              <a href="#delete"> Delete </a>
            </li>
            <li>
              <a href="#form"> Form </a>
            </li>
            <li>
              <a href="#icon"> Icon </a>
            </li>
            <li>
              <a href="#images"> Images </a>
            </li>
            <li>
              <a href="#notifications"> Notifications </a>
            </li>
            <li>
              <a href="#progress"> Progress bars </a>
            </li>
            <li>
              <a href="#table"> Table </a>
            </li>
            <li>
              <a href="#tag"> Tag </a>
            </li>
          </ul>
          <p class="menu-label"> Components </p>
          <ul class="menu-list">
            <li>
              <a href="#breadcrumb"> Breadcrumb </a>
            </li>
            <li>
              <a href="#dropdown"> Dropdown </a>
            </li>
            <li>
              <a href="#card"> Card </a>
            </li>
            <li>
              <a href="#hero"> Hero </a>
            </li>
            <li>
              <a href="#level"> Level </a>
            </li>
            <li>
              <a href="#media"> Media object </a>
            </li>
            <li>
              <a href="#menu"> Menu </a>
            </li>
            <li>
              <a href="#message"> Message </a>
            </li>
            <li>
              <a href="#modal"> Modal </a>
            </li>
            <li>
              <a href="#navbar"> Navbar </a>
            </li>
            <li>
              <a href="#pagination"> Pagination </a>
            </li>
            <li>
              <a href="#panel"> Panel </a>
            </li>
            <li>
              <a href="#tabs"> Tabs </a>
            </li>
          </ul>
        </aside>
      </div>
      <div class="column">
        {% include elements/typography.html %}
        {% include elements/box.html %}
        {% include elements/button.html %}
        {% include elements/content.html %}
        {% include elements/delete.html %}
        {% include elements/form.html %}
        {% include elements/icon.html %}
        {% include elements/images.html %}
        {% include elements/notifications.html %}
        {% include elements/progress.html %}
        {% include elements/table.html %}
        {% include elements/tag.html %}
        {% include components/breadcrumb.html %}
        {% include components/hero.html %}
        {% include components/card.html %}
        {% include components/dropdown.html %}
        {% include components/level.html %}
        {% include components/media.html %}
        {% include components/menu.html %}
        {% include components/message.html %}
        {% include components/modal.html %}
        {% include components/navbar.html %}
        {% include components/pagination.html %}
        {% include components/panel.html %}
        {% include components/tabs.html %}
      </div>
    </div>
  {{ content }}
  {% include footer.html %}
</body>

</html>
